<template>
	<view class="container">
		<SearchBar :back="true" :fixed="true" :focus="false" @search="onSearch"></SearchBar>			
		<view class="near_title">
			附近推荐
		</view>
		<view class="near_list">
			<view class="near_item" v-for="(item,index) in near_list" @tap="toDestinate(item)" :key="index">
				<view class="cover" v-if="item.photos && item.photos[0]">
					<image :src="item.photos[0].url" ></image>
				</view>
				<view class="cover" v-else>
					<image :src="default_img" ></image>
				</view>
				<view class="near_info">
					<view class="name">
						<u-icon name="tags-fill" color="#FFDA33"></u-icon>
						<text>{{item.name}}</text>
					</view>
					<view class="tel" v-if="item.tel && item.tel.length">
						<u-icon name="phone-fill" color="#FFDA33"></u-icon>
						<text>{{item.tel.length?item.tel.split(";")[0]:''}}</text>
					</view>
					<view class="location">
						<u-icon name="map-fill" color="#FFDA33"></u-icon>
						<text>{{item.adname}}|{{item.address}}</text>
					</view>
					<view class="distance">
						<u-icon name="pushpin-fill" color="#FFDA33"></u-icon>
						<text>距离查询位置{{item.distance}}米</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import amap from "../../js_sdk/js-amap/amap-wx.js";
import SearchBar from '../index/components/search.vue';
export default{
	data(){
		return{
			keyword:'',//搜索关键字
			key:'df162685d7783393e0c0d9dbec3548a6',//webserve服务端接口key
			near_list:[],//附近推荐列表
			latitude:'116.473168',//纬度
			longitude:'39.993015',//经度
			poi:'',//餐饮050000，住宿100000，风景名胜110000，购物服务060000，影院080601
			default_img:'https://images.psketch.com/FoOlenv7DOFRT_VmeLSTH3AZXAs8'
		}
	},
	components:{
		SearchBar
	},
	onLoad(option) {
		// 优先使用传入的位置参数
		if (option.latitude && option.longitude) {
			this.latitude = parseFloat(option.latitude);
			this.longitude = parseFloat(option.longitude);
			this.getRound();
		} else {
			// 尝试从Vuex获取位置
			const location = uni.getStorageSync('location');
			if (location) {
				try {
					const loc = JSON.parse(location);
					if (loc.latitude && loc.longitude) {
						this.latitude = loc.latitude;
						this.longitude = loc.longitude;
						this.getRound();
						return;
					}
				} catch (e) {
					console.error('解析位置信息失败', e);
				}
			}
			
			// 如果没有位置信息，让用户选择位置
			this.chooseLocation();
		}
	},
	methods:{
		onSearch(keywords){
			console.log("keywords",keywords);
			uni.request({
				url:`https://restapi.amap.com/v3/place/around?key=${this.key}&location=${this.longitude},${this.latitude}&radius=10000&keywords=${keywords}`,
				success: (res) => {
					console.log("res",res.data.pois);
					this.near_list = res.data.pois;
				}
			})
		},
		chooseLocation(){
			uni.chooseLocation({
				success: (res)=> {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					
					// 更新位置信息
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					
					// 存储位置信息到Vuex
					uni.setStorageSync('location', JSON.stringify({
						latitude: res.latitude,
						longitude: res.longitude
					}));
					
					// 根据新位置获取附近信息
					this.getRound();
					
					uni.showToast({
						icon: 'success',
						title: '位置已更新',
						duration: 1500
					});
				},
				fail: (err) => {
					console.error('选择位置失败', err);
					uni.showToast({
						title: '选择位置失败',
						icon: 'none'
					});
				}
			})
		},
		getRound(){
			uni.request({
				url:`https://restapi.amap.com/v3/place/around?key=${this.key}&location=${this.longitude},${this.latitude}&radius=10000&types=100000`,
				success: (res) => {
					console.log("res",res.data.pois);
					this.near_list = res.data.pois;
				}
			})
		},
		// 到目的地
		toDestinate(item){
			console.log("item",item);
			// 地址名，起始经纬度，结束经纬度
			let destName = item.name;
			let start = this.longitude+','+this.latitude;
			let dest = item.location;
			uni.navigateTo({
				url:`./nav?destName=${destName}&start=${start}&dest=${dest}`
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #fff;
}
.near_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin: 20rpx auto;
	box-sizing: border-box;
	overflow: hidden;
	height: 200rpx;
	.cover{
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		margin-right:20rpx;
		image{
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			box-shadow:0 0 10rpx 0rpx rgba(0,0,0,.1);
		}
	}
	.near_info{
		flex:1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.name{
			text{
				font-weight: bold;
				font-size: 30rpx;
			}
		}
		view{
			display: flex;
			text{
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}
	}
}
.near_title{
	position: relative;
	height: 60rpx;
	line-height: 60rpx;
	text-indent: 70rpx;
}
.near_title::before{
	content:"";
	position: absolute;
	height: 30rpx;
	width: 6rpx;
	background-color: #FFDA33;
	left: 40rpx;
	top:50%;
	transform: translateY(-50%);
}
.container{
	background-color: transparent;
	paddingt-top:60rpx;
}
</style>
